import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, WingBlank, Card, Flex, Tabs, Badge, List } from 'antd-mobile'
import { Chart, Line, Scale, Guide, Point, Axis, Interval, Coord, Legend} from 'ant-design-mobile-chart'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import axios from 'axios'
import axiosFunc from '@/common/api/axiosFunc.js'
import utilsFunc from '@/common/api/utilsFunc.js'
import '@/common/style/ui.less'
import '@/common/style/talantInfoCom.less'
const Item = List.Item;
class TalantInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titleData: {
                title: "Back",
                centerTitle: "TalentName",
                rightTitle: ""
            },
            tabs: [
                { title: <Badge>Info</Badge> },
                { title: <Badge>Revenue</Badge> },
                { title: <Badge>Performance</Badge> },
            ],
            tab1Data: [
                {
                    id: 1,
                    name: "Talent Info",
                    desc: "",
                    extraData: "",
                    arrow: "",
                },
                {
                    id: 2,
                    name: "Agency Info",
                    desc: "",
                    extraData: "",
                    arrow: ""
                },
                {
                    id: 3,
                    name: "Join Date",
                    desc: "",
                    extraData: "",
                    arrow: ""
                },
                {
                    id: 4,
                    name: "Status",
                    desc: "",
                    extraData: "",
                    arrow: ""
                },
                {
                    id: 5,
                    name: "Reason",
                    desc: "",
                    extraData: <span className="add-btn"><img src={require("../../images/add-icon.svg")}/>Add Reason</span>,
                    arrow: ""
                }
            ],
            data: [{
                name: 'Sharing',
                percent: 34.12,
                a: '1',
              }, {
                name: 'Allowance',
                percent: 24.93,
                a: '1',
              }, {
                name: 'Bouns',
                percent: 23.37,
                a: '1',
              },{
                name: 'Prize',
                percent: 17.58,
                a: '1',
              }],
            map: [
                {name: 'Sharing',value : '34.12%           4544',marker: {
                    symbol: 'circle',
                    fill: '#FE5D4D',
                    radius: 5
                }},
                {name: 'Allowance',value : '24.93%           3321',marker: {
                    symbol: 'circle',
                    fill: '#3BA4FF',
                    radius: 5
                }},
                {name: 'Bouns',value : '23.37%             3113',marker: {
                    symbol: 'circle',
                    fill: '#737DDE',
                    radius: 5
                }},
                {name: 'Prize',value : '17.58%           2341',marker: {
                    symbol: 'circle',
                    fill: '#737D00',
                    radius: 5
                }}
            ],
            tableHead: [
                {id: 1, value: "Month"},
                {id: 2, value: "Sharing"},
                {id: 3, value: "Allowance"},
                {id: 4, value: "Bouns"},
                {id: 5, value: "Prize"}
            ],
            tableBody:[
                {pid: 1,
                content:[
                    {id: 1, value: "2018-10"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 2,
                content:[
                    {id: 1, value: "2018-09"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 3,
                content:[
                    {id: 1, value: "2018-08"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 4,
                content:[
                    {id: 1, value: "2018-07"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]}
            ],
            perTableHead: [
                {id: 1, value: "Month"},
                {id: 2, value: "Performance Hour"},
                {id: 3, value: "Diamond"},
            ],
            Talentdata: [{
                time: '周一',
                rain: 11,
                codeType: "one"
            }, {
                time: '周二',
                rain: 13,
                codeType: "one"
            }, {
                time: '周三',
                rain: 14,
                codeType: "one"
            }, {
                time: '周四',
                rain: 10,
                codeType: "one"
            }, {
                time: '周五',
                rain: 12,
                codeType: "one"
            }, {
                time: '周六',
                rain: 16,
                codeType: "one"
            }, {
                time: '周日',
                rain: 13,
                codeType: "one"
            },{
                time: '周一',
                rain: 1,
                codeType: "two"
            }, {
                time: '周二',
                rain: 13,
                codeType: "two"
            }, {
                time: '周三',
                rain: 4,
                codeType: "two"
            }, {
                time: '周四',
                rain: 1,
                codeType: "two"
            }, {
                time: '周五',
                rain: 18,
                codeType: "two"
            }, {
                time: '周六',
                rain: 16,
                codeType: "two"
            }, {
                time: '周日',
                rain: 19,
                codeType: "two"
            }],
            infoObj: {},
            statArr: [],
            levelConfig: {
               6: require('../../images/levelstar.png'),
               11: require('../../images/levelDiamonds.png'),
               55: require('../../images/levelking.png'),
            }
        }
    }
    handleLevel(level){
        switch(level){
            case level<7 :
                return require('../../images/levelstar.png');
            case level<12 :
                return  require('../../images/levelstar.png');
           default :
               return  require('../../images/levelstar.png');
        }
    }
    componentDidMount(){
        let userId=parseInt(this.props.match.params.id);
        let that = this;
        axios.all([axiosFunc.getTalentInfo(userId),axiosFunc.getTalentStat(userId)])
        .then(axios.spread(function (acct, perms) {
            // 两个请求现在都执行完成
            if(acct.data.code !=='0') {
                return alert(acct.data.msg)
            };
            if(perms.data.code !=='0') {
                return alert(perms.data.msg)
            };
            console.log(acct.data.data);
            let newtab1Data = that.state.tab1Data;
            newtab1Data[0].extraData = acct.data.data.nickname + '/' + acct.data.data.userId;
            newtab1Data[1].extraData = acct.data.data.agency.name + '/' + acct.data.data.agencyId;
            newtab1Data[2].extraData = utilsFunc.formatTimeDate(acct.data.data.joinTime);
            that.setState({
                infoObj: acct.data.data,
                statArr: perms.data.data,
                tab1Data: newtab1Data
            });
            
        })).catch((err)=>{
            alert(err)
        })
    }
    render() {
        return (
            <div className="talantInfo-container">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace />
                <Card>
                    <WingBlank>
                    <Card.Body className="talantInfo">
                        <Flex className='bgWhite talantInfoGrid'>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <img src={this.state.infoObj.avatar} alt='' />
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Diamond</span>
                                    <span className='number'>{this.state.infoObj.totalDiamonds}</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Performance</span>
                                    <span className='number'>{this.state.infoObj.broadcastTime}</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title title-level'>Level</span>
                                    <img className='item-icon' src={this.handleLevel(this.state.infoObj.talentLevel)} />
                                </Flex>
                            </Flex.Item>
                        </Flex>
                    </Card.Body>
                    </WingBlank>
                </Card>
                <WhiteSpace />
                <Tabs tabs={this.state.tabs}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                <div style={{ backgroundColor: '#fff' }}>
                    <List className="my-list">
                        {
                            this.state.tab1Data.map((item) =>
                                <Item
                                    key={item.id}
                                    extra={item.extraData}
                                    arrow={item.arrow}
                                    multipleLine
                                    onClick={() => { }}
                                >
                                    {item.name} <span className="item-desc">{item.desc}</span>
                                </Item>
                            )
                        }
                    </List>
                </div>
                    <div>
                        <div style={{ backgroundColor: '#fff' }}>
                        <Chart
                            width="400"
                            height="180"
                            padding= {[ 20, 250, 20, 20 ]}
                            source={this.state.data} 
                            pixelRatio={window.devicePixelRatio}>
                            <Interval position="a*percent" color={['name',['#FE5D4D','#3BA4FF','#737DDE','#737D00']]} adjust="stack"/>
                            <Coord type="polar" transposed={true} innerRadius= {0.7} radius={5}/>
                            <Axis field="percent" enable={false}/>
                            <Axis field="a" enable={false}/>
                            <Guide type="html" 
                                position = {['50%', '45%']}
                                html={ '<div style="width: 100px;height: 40px;text-align: center;">' + '<div style="font-size: 12px;margin-bottom:10px;color: rgba(166, 166, 166, 1)">Revenue</div>' + '<div style="font-size: 14px;">13319</div>' + '</div>'}
                            />
                            <Legend enable={true} offsetX={-30} custom={true} items={this.state.map} position={'right'} itemFormatter={(val)=>{ return val}}/>
                        </Chart>
                        </div>
                        <WhiteSpace />
                        <WingBlank>
                            <div className="sub-title">Performance List</div>
                        </WingBlank>
                        <WhiteSpace />
                        <table>
                            <thead>
                                <tr>
                                    {this.state.tableHead.map((item)=>
                                        <th key={item.id}>{item.value}</th>
                                    )}
                                </tr>
                            </thead>
                            <tbody>
                                {this.state.tableBody.map((item)=>
                                    <tr key={item.pid}>
                                        {item.content.map((childItem)=>
                                            <td key={childItem.id}>{childItem.value}</td>
                                        )}
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '205px', backgroundColor: '#fff' }}>
                        <Chart source={this.state.statArr} width="350" height="200" syncY={true} pixelRatio={window.devicePixelRatio}>
                            <Point position="date*broadcastTime" color={'#FE5D4D'} style={
                                {
                                    fill: '#fff',
                                    lineWidth: 2
                                }
                            } />
                            <Line position="date*broadcastTime" color={'#FE5D4D'}
                                shape="smooth"
                                style={{
                                    lineDash: [0], // 虚线的设置
                                    lineWidth: 1 // 线的宽度
                                }
                                }
                            />
                            <Point position="date*totalDiamonds" color={'#737DDE'} style={
                                {
                                    fill: '#fff',
                                    lineWidth: 2
                                }
                            } />
                            <Line position="date*totalDiamonds" color={'#737DDE'}
                                shape="smooth"
                                style={{
                                    lineDash: [0], // 虚线的设置
                                    lineWidth: 1 // 线的宽度
                                }
                                }
                            />
                            <Axis field="totalDiamonds" enable={false} />
                            <Scale field="broadcastTime" formatter={(broadcastTime) => (broadcastTime*1).toFixed(0)} tickCount={7} />
                            <Scale field="date" formatter={(date) => utilsFunc.formatTime(date)} type="timeCat" />
                        </Chart>
                        </div>
                        <WhiteSpace />
                        <WingBlank>
                            <div className="sub-title">Revenue List</div>
                        </WingBlank>
                        <WhiteSpace />
                        <table>
                            <thead>
                                <tr>
                                    {this.state.perTableHead.map((item)=>
                                        <th key={item.id}>{item.value}</th>
                                    )}
                                </tr>
                            </thead>
                            <tbody>
                                {this.state.statArr.map((item)=>
                                    <tr key={item.id}>
                                            <td >{utilsFunc.formatTime(item.date)}</td>
                                            <td >{item.broadcastTime}</td>
                                            <td >{item.totalDiamonds}</td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </Tabs>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

export default connect(mapStateToProps)(TalantInfo);
